/**
 *  @name FunnelChart
 * @desc 漏斗图
 * */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入漏斗图
import "echarts/lib/chart/funnel"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"

import "./styles.css"

class FunnelChart extends Component {
  state = {
    idd: "",
    clientWidth: "",
    buffer: [],
    faram: [],
    modvisible: false,
    rate: "", //分段
    num: 0 //人数
  }
  myChart = null
  componentDidMount() {
    this.init()
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.resize)
  }

  componentDidUpdate() {
    const { buffer = [], faram = [], idd } = this.state
    const { data01 = [], data02 = [], ids } = this.props
    const _buffer = JSON.stringify(buffer)
    const _faram = JSON.stringify(faram)
    const _data01 = JSON.stringify(data01)
    const _data02 = JSON.stringify(data02)

    if (_buffer !== _data01 || _faram !== _data02 || idd !== ids) {
      this.init()
      this.setState({ buffer: data01, faram: data02, idd: ids })
    }
  }
  init = () => {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.props.ids))
    this.updateData()
    this.myChart.on("click", this.chartCkick)
    this.myChart.resize()
  }
  updateData = () => {
    const { data01, data02 } = this.props

    this.myChart.setOption({
      title: {
        // text: '成绩分析',
        left: "left",
        top: "bottom"
      },

      tooltip: {
        trigger: "item",
        formatter: "{b} : {c}人"
      },
      toolbox: {
        orient: "vertical",
        top: "center",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },

      color: ["#94C8DC", "#A7D7E9", "#DBE1EF", "#BBDDD5", "#61BFBF", "#61BFBF", "#BBDDD5", "#DBE1EF", "#A7D7E9", "#94C8DC"],
      series: [
        {
          name: "金字塔",
          type: "funnel",
          width: "60%",
          height: "45%",
          left: "15%",
          top: "5%",
          sort: "ascending", //排序方式
          // silent: true, //是否不与click、hover互动

          labelLine: {
            show: true,
            lineStyle: {
              length: 10,
              length2: 20,
              color: "#555",
              type: "dashed"
            }
          },

          itemStyle: {
            normal: {
              label: {
                color: "#555",
                position: "left",
                formatter: "{c}人",
                fontSize: 14
              }
            }
          },

          data: data01
        },
        {
          name: "金字塔02",
          type: "funnel",
          width: "60%",
          height: "45%",
          left: "15%",
          top: "5%",
          sort: "ascending", //排序方式
          // silent: true, //是否不与click、hover互动
          labelLine: {
            show: true,
            lineStyle: {
              length: 10,
              length2: 20,
              color: "#555",
              type: "dashed"
            }
          },
          itemStyle: {
            normal: {
              opacity: 0,
              label: {
                color: "#555",
                fontSize: 14
              }
            }
          },
          data: data01
        },
        {
          name: "漏斗图",
          type: "funnel",
          width: "60%",
          height: "45%",
          left: "15%",
          top: "50%",
          // silent: true,
          labelLine: {
            show: true,
            lineStyle: {
              length: 10,
              length2: 20,
              color: "#555",
              type: "dashed"
            }
          },
          itemStyle: {
            normal: {
              label: {
                color: "#555",
                fontSize: 14
              }
            }
          },
          data: data02
        },
        {
          name: "漏斗图02",
          type: "funnel",
          width: "60%",
          height: "45%",
          left: "15%",
          top: "50%",
          // silent: true,
          labelLine: {
            show: true,
            lineStyle: {
              length: 10,
              length2: 20,
              color: "#555",
              type: "dashed"
            }
          },
          itemStyle: {
            normal: {
              opacity: 0,
              label: {
                color: "#555",
                position: "left",
                formatter: "{c}人",
                fontSize: 14
              }
            }
          },
          data: data02
        }
      ]
    })
  }

  render() {
    const { ids } = this.props
    return <div id={ids} className="chart"></div>
  }
}
export default FunnelChart
